import React from 'react';
import { Button , Pagination  } from 'antd';
import StateMixin from 'reflux-state-mixin';

import CatalogueAction from 'pages/catalogue/actions/catalogueAction';
import CatalogueStore from 'pages/catalogue/stores/catalogueStore'

export default React.createClass({
  mixins: [StateMixin.connect(CatalogueStore)],

  getInitialState() {
    return {
      isTable:true,
      srvcatDirList1:[],
      srvItemList1:[],
      parentId:[],
      item:0,
      allTotal:0,
      subTotal:0
    };
  },
  componentDidMount() {
    let param = {};
    param.pageSize = 9;
    param.curPage = 0;
    CatalogueAction.getAllServices(param).then((data)=>{
      this.setState({
        allTotal:data.total
      })
    })
  },
  onChange(id) {
    let parentId = this.state.parentId;
    parentId.push(id);
    let param = {};
    param.parentId = id;
    param.pageSize = 7;
    CatalogueAction.getSubServices(param).then((data)=>{
      let item = this.state.item + 1;
      this.setState({
        srvcatDirList1:data.srvcatDirList,
        srvItemList1:data.srvItemList,
        parentId:parentId,
        item: item,
        subTotal: data.total,
        isTable:false
      })
    })
  },
  onPromise(id) {
    CatalogueAction.getTicket(id)
  },
  returnRadius() {
    let parentId = this.state.parentId;
    if (this.state.item > 1 ) {
      let param = {};
      param.parentId = this.state.parentId[this.state.item - 2];
      parentId.pop();
      CatalogueAction.getSubServices(param).then((data)=>{
        let item = this.state.item - 1;
        this.setState({
          srvcatDirList1:data.srvcatDirList,
          srvItemList1:data.srvItemList,
          parentId:parentId,
          item: item
        })
      })
    }
    else if (this.state.item === 1) {
      parentId.pop();
      let item = this.state.item - 1;
      this.setState({
        isTable:true,
        item:item,
        parentId:parentId,
      })
    }
  },
  handleAllChange(current) {
    let param = {};
    param.pageSize = 9;
    param.curPage = current;
    CatalogueAction.getAllServices(param)
  },
  handleSubChange(current) {
    let param = {};
    param.parentId = this.state.parentId;
    param.pageSize = 7;
    parent.curPage = current;
    CatalogueAction.getSubServices(param).then((data)=>{
      this.setState({
        srvcatDirList1:data.srvcatDirList,
        srvItemList1:data.srvItemList
      })
    })
  },
  render() {
    return (
            <div className="middle-wrap">
                <div className="middle-content">
                    <span className="middle-content-span">所有服务选项</span>
                    <Button type='primary' className="middle-content-button" onClick={this.returnRadius}>返回</Button>
                        {this.state.isTable ?
                            <div>
                            <div className="middle-content-content">
                            <ul style={{position:'relative',width:'700px'}} className='radius-ul'>
                                {_.map(this.state.allServices,(item,index)=>{
                                  return (
                                       <li onClick={this.onChange.bind(this,item.id)} key={index}>
                                           <a><i className="anticon anticon-github" style={{fontSize: '100px'}} /></a>
                                           <span>{item.title}</span>
                                       </li>
                                  )
                                })}
                            </ul> </div><Pagination total={this.state.allTotal}
                            onChange={this.handleAllChange} className='middle-pagination' /></div>
                            : <div>
                            <div className="middle-content-content">
                            <ul className='tables-ul'>
                                {_.map(this.state.srvcatDirList1,(item)=>{
                                  return (
                                    <li key={item.id}>
                                        <div className='tables-ul-div1'>
                                            <i className="anticon anticon-github" style={{fontSize: '50px'}} />
                                            <span>{item.title}</span>
                                        </div>
                                        <Button type='primary' className='tables-ul-button'
                                                onClick={this.onChange.bind(this,item.id)}>打开</Button>
                                    </li>
                                  )
                                })
                            }
                                {_.map(this.state.srvItemList1,(item)=>{
                                  return (
                                        <li key={item.id}>
                                            <div className='tables-ul-div1'>
                                                <i className="anticon anticon-github" style={{fontSize: '50px'}} />
                                                <span>{item.title}</span>
                                            </div>
                                            <div className='tables-ul-div2'>

                                                <span>服务时间：5*8工作制</span>
                                                <span>联系方式：18758184649</span>

                                            </div>
                                            <Button type='primary' className='tables-ul-button'
                                                    onClick={this.onPromise.bind(this,item.id)}>申请</Button>
                                        </li>
                                  )
                                })
                                }
                            </ul>
                                </div>
                            <Pagination total={this.state.subTotal}
                            onChange={this.handleSubChange} className='middle-pagination' /></div>
                        }
                   </div>
            </div>
    );
  }
})
